<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #target {
            border: 1px solid red;
            padding: 10px;
            min-height: 80px;
        }
    </style>
    <title>拖放</title>

</head>

<body>
    <img id="source" src="1.jpg" alt="妹子" height="81" width="61" draggable="true">
    <div id="target"></div>

    <script>
        let source = document.getElementById('source');
        let target = document.getElementById('target');
        source.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text', e.target.id);
            e.dataTransfer.effectAllowed = 'copyMove';
        });
        target.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy'
        });
        target.addEventListener('drop', function(e) {
            e.preventDefault();
            let id = e.dataTransfer.getData('text');
            let el = document.getElementById(id);
            e.target.appendChild(el.cloneNode(true));
        });
    </script>
</body>

</html>